<template>
  <u-popup :show="show" mode="center"  @close="closeHandle" bgColor="transparent">
    <view class="invite-poster-wrapper" @click="closeHandle">
      <image class="img" :show-menu-by-longpress='true' :src="downloadUrl" mode="widthFix"></image>
      
      <!-- <view class="save-tip-wrapper">
        <div class="save-tip">
          <u-icon size="36rpx" name="download" color="#953C13"></u-icon>
          长按图片保存 
        </div>
      </view> -->
    </view>
  </u-popup>
</template>

<script>
  import {getQrcodeUrl} from '@/common/api/index_api.js'
  import {
    useDrawPoster
  } from '@/components/u-draw-poster'
  import {
    saveLocalImg
  } from '@/common/utils/util.js'
  
  export default{
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      clientUserUid:{
        type:String,
        default:''
      },
    },
    watch:{
      visible:{
        handler(val){
          this.ok = true
          this.show = false
          if(val){
            this.createChipCanvas()
            // this.testImg()
          }
        },
        immediate:true
      },
    },
    data(){
      return {
        show: false,
        downloadUrl: '',
        staticImgs:{
          img: this.imgBaseURL + '/scl/checkup-mental/share-page-img.png'
        }
      }
    },
    methods:{
      testImg(){
        this.show = true
        this.downloadUrl = this.staticImgs.img
      },
      confirmHandle(){
        this.$emit('confirm')
      },
      closeHandle(){
        this.show = false
        this.$emit('close')
      },
      async getQrcode(){
        this.scene = 'p=1@r=5@id='+this.clientUserUid
        this.page = 'pages/index/index'
        const {data:dRes} = await getQrcodeUrl({
          sceneStr:this.scene,
          pageStr:this.page
        })
        
        if(dRes.success){
          this.qrCode = dRes.data
        }
        
        if(!dRes.success || !this.qrCode){
          uni.showToast({
            title: '获取二维码失败，请重新打开海报',
            icon: 'none'
          })
          
          this.ok = false
          this.closeHandle()
        }
      },
      async createChipCanvas() {
          uni.showLoading({
            title: '生成中...',
            mask: true
          })
          
          await this.getQrcode()
          
          if(!this.ok){
            uni.hideLoading()
            return false
          }
          
          try{
            // 创建绘制工具
            const dp = await useDrawPoster({
              selector: 'dcanvas',
              loading: true,
              debug: true,
              width: 750,
              height: 1334
            })
            const w = dp.canvas.width
            const h = dp.canvas.height
            
            dp.draw(async (ctx) => {
              // 绘制背景图
              await ctx.drawImage(this.staticImgs.img, 0, 0, w, h)
                
              // 头像
              // await ctx.drawRoundImage(this.avatar, 26,80, 100, 100, 100)
              
              // ctx.fillStyle = '#FFF'
              // ctx.font = 'normal 24px PingFang SC'
              // ctx.fillText(this.nickName,150, 138)
            })
            
            dp.draw(async (ctx)=>{
              // 小程序二维码
              await ctx.drawRoundImage(this.qrCode, 36, 1120, 180, 180, 100)
            })
            
            
            
            this.downloadUrl = await dp.create()
          }catch(e){
            this.$showToast('生成失败，请重试')
            this.closeHandle()
          }
          this.show = true
          uni.hideLoading()
          console.log(this.downloadUrl, '---this.downloadUrl')
      }
      
    }
  }
</script>

<style lang="scss" scoped>
  .invite-poster-wrapper{
    width: 608rpx;
    .img{
      width: 100%;
    }
  }
</style>